<template>
  <view>
    <scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
      @refresherrefresh="onRefresh" @scrolltolower="onScrollTolower">
      <view class="item" v-for="(item, index) in indexList" :key="index">
        <u-swipe-action>
          <u-swipe-action-item :options="options1" @click="onDelete(item.id)">
            <view class="swipe-action u-border-top u-border-bottom btn-right">
              <view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text">回访用户:{{ item.business.nickname }}</text>
                </view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text">回访内容:{{ item.content }}</text>
                </view>
              </view>

              <view class="btn">
                <u-button text="编辑" type="success" size="small" @click="onEdit(item.id)"></u-button>
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </scroll-view>
    <!-- 编辑弹出层 -->
    <u-popup :show="edshow" @close="close" @open="open" closeable :overlay="overlay">
      <!-- 编辑 -->
      <u--form labelPosition="left" :model="visit" :rules="rules" ref="edit" class="form">
        <u-form-item label="回访内容" prop="name" class="item">
          <u--input v-model="visit.content"></u--input>
        </u-form-item>
      </u--form>
      <u-button type="warning" icon="pushpin-fill" @click="onEdSubmit" :customStyle="btnStyle">提交</u-button>
    </u-popup>

    <u-toast ref="uToast"></u-toast>
    <u-modal :show="show" :title="title" :content="content" @confirm="onConfirm" showCancelButton
      @cancel="show = !show" />
  </view>


</template>
<script>
export default {
  data() {
    return {
      indexList: [],
      LoginAdmin: {},
      page: 1,
      limit: 10,
      options1: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      show: false,
      title: "未知标题",
      content: "未知内容",
      // 下拉刷新状态
      triggered: false,
      // 上拉加载状态
      finished: false,
      // 回访id
      id: 0,
      // 弹出层内容
      edshow: false,
      visit: {
        content: "",
      },
      // 表单验证
      rules: {
        content: [
          {
            required: true,
            message: "请输入回访内容",
            trigger: ["blur", "change"],
          },
        ],
      },
      // 按钮样式
      btnStyle: {
        marginTop: "30rpx",
        width: "90%",
      },
      // 弹出层开关
      overlay: true,
    };
  },
  onLoad() {
    this.LoginAdmin = uni.getStorageSync("admin") ?? {};

    this.loadmore();
  },
  methods: {
    onScrollTolower() {
      if (this.finished) {
        return;
      }

      this.page = this.page + 1;
      this.loadmore();
    },
    onRefresh() {
      // 开启下拉刷新
      this.triggered = true;
      // 加载状态为false
      this.finished = false;
      this.page = 1;
      this.indexList = [];
      this.loadmore();
    },
    // 获取数据
    async loadmore() {
      let data = {
        id: this.LoginAdmin.id,
        page: this.page,
        limit: this.limit,
      };
      let res = await this.$u.api.admin.visit(data);
      this.triggered = false;
      if (res.code === 1 && res) {
        
        this.indexList = this.indexList.concat(res.data.list);
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: res.msg,
        });
      }
    },
    // 编辑
    onEdit(id) {
      this.id = id;
      this.indexList.forEach((item) => {
        if (item.id === id) {
          this.visit.content = item.content;
        }
      });
      this.edshow = true;
    },
    onEdSubmit()
    {
      this.$refs.edit.validate().then(async (res) => {
        let data = {
          id: this.id,
          content: this.visit.content,
        };

        let result = await this.$u.api.admin.visitedit(data);
        if (result.code === 1 && result) {
          this.$refs.uToast.show({
            type: "success",
            message: result.msg,
          });
          this.edshow = false;
          setTimeout(() => {
            this.$router.go(0);
          }, 1500);
        } else {
          this.$refs.uToast.show({
            type: "error",
            message: result.msg,
          });
        }
      }).catch((err) =>{
        console.log(err)
      })
    },
    // 
    open() {

    },
    close() {
      this.edshow = false;
    },



    // 删除
    onDelete(id) {
      this.id = id;
      this.title = "删除回访记录";
      this.content = "是否删除该回访记录";
      this.show = true;
    },
    async onConfirm() {
      let data = {
        id: this.id,
      };
      let res = await this.$u.api.admin.visitdel(data);
      if (res.code === 1 && res) {
        this.$refs.uToast.show({
          type: "success",
          message: res.msg,
        });
        this.show = false;
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: res.msg,
        })
      }
    },
  },
};
</script>

<style lang="scss">
.list {
  /* #ifdef H5 || APP-PULS */
  height: 86vh;
  /* #endif */

  /* #ifdef MP-WEIXIN */
  height: 94vh;
  /* #endif */
  overflow: hidden;
}

.btn {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: 3vw;
}

.btn-right {
  display: flex;
  justify-content: space-between;
}

.u-page {
  padding: 0;
}

.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 25rpx 0;

    &__text {
      font-size: 15px;
      color: $u-main-color;
      padding-left: 30rpx;
    }
  }
}
</style>
